<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<style>
    .class1{
        background:#444;
        color: pink;
    }
</style>
<body>
    <div id="vue_det">
        <h1>size:{{size}}</h1>
        <h1>url:{{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <div id="app">
        <label for="r1"></label><input type="checkbox" v-model="use" id="r1">
        <div v-bind:class="{'class1': use}">v-bind:class 指令</div>
        <div v-if="use">你就会看到我</div>
        <div><a v-bind:href="url">点击</a></div>
       {{message}}
        <p v-if="show">这是一段文本</p>
        <input type="text" v-model="message">
        <button v-on:click="handleClose">点击隐藏</button>
    </div>
</body>
</html>
<script type="text/javascript">
    new Vue({
        el:'#vue_det',
        data:{
            size:"菜鸟驿站",
            url:'http://www.baidu.com',
            show: true

        },
        methods:{
          details:function () {
              return this.size+"-- 学习不仅是技术，更是梦想"
          }  
        }
    })
    new Vue({
        el: '#app',

        data:{
            use: true,
            url:"http://www.taobao.com",
            message:"root",
            show:true
        },
        methods:{
            handleClose: function () {
                this.show = false;
            }
        }
    });
</script>